<template>
  <div class="layout">
    <div class="main may-blur" :class="{'blur': showDialog}">
      <nav-bar v-if="!hideNav">
        <nav-item is-text>Points Mall</nav-item>
        <nav-item right :when-click="whenShowLoginDialog">Login</nav-item>
        <nav-item right :when-click="whenShowRegisterDialog">Register</nav-item>
      </nav-bar>
      <slot></slot>
    </div>
    <my-footer v-if="!hideFooter" class="may-blur" :class="{'blur': showDialog}"></my-footer>
    <form class="login-dialog" :class="{'show-dialog': showLoginDialog}">
      <div class="error-message" :class="{'show-error-message': showErrorMessage}">Invalid username or password</div>
      <input class="username-input input" id="username-input" v-model="userName" placeholder="Username" required>
      <input class="password-input input" id="password-input" type="password" v-model="password" placeholder="Password" required>
      <button class="submit-btn" @click.prevent="login">Login</button>
      <div class="close-btn" @click="showLoginDialog=false">&times;</div>
    </form>
    <form class="register-dialog" :class="{'show-dialog': showRegisterDialog}">
      <div class="register-step register-step1">
        <input class="username-input input" id="username-input" v-model="userName" placeholder="Username" required>
        <input class="password-input input" id="password-input" type="password" v-model="password" placeholder="Password" required>
        <button class="submit-btn" @click.prevent="register">Register</button>
      </div>
      <div class="close-btn" @click="showRegisterDialog=false">&times;</div>
    </form>
  </div>
</template>
<script lang="ts">
export default {
  name: "CustomLayout"
}
</script>
<script setup lang="ts">
import NavBar from "./NavBar.vue"
import NavItem from "./NavItem.vue"
import MyFooter from "./MyFooter.vue"
import { LoginForm, submitLoginForm } from "../network/main"
import { useStore } from "../store/main"
import { toRefs, ref, computed } from "vue"
const props = withDefaults(defineProps<{
  hideNav?: boolean,
  hideFooter?: boolean
}>(), {
  hideNav: false,
  hideFooter: false
})
const store = useStore()
const { hideNav, hideFooter } = toRefs(props)
const showLoginDialog = ref(false)
const showRegisterDialog = ref(false)
const showDialog = computed(() => showLoginDialog.value || showRegisterDialog.value)
const showErrorMessage = ref(false)
const userName = ref("")
const password = ref("")
function whenShowLoginDialog() {
  showLoginDialog.value = true
}
function whenShowRegisterDialog() {
  showRegisterDialog.value = true
}
async function login() {
  const submitObj: LoginForm = {
    userName: userName.value,
    password: password.value
  }
  try {
    await submitLoginForm(store, submitObj)
  } catch (e) {
    showErrorMessage.value = true
  }
}
async function register() {

}
</script>
<style scoped lang="less">
@import "../vars";
.layout {
  display: flex;
  position: relative;
  flex-direction: column;
  min-height: 100vh;
}
.main {
  flex: 1
}
.login-dialog, .register-dialog {
  padding: 1.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: none;
  background-color: @gray-50;
  box-shadow: 0 0 0 50vmax rgba(0,0,0,.3);
  grid-template-columns: auto auto;
  gap: 1em;
  display: none;
  flex-direction: column;
}
.show-dialog {
  display: flex;
}
.blur {
  filter: blur(3px);
}
.may-blur {
  transition: 0.5s filter ease;
}
.close-btn {
  position: absolute;
  top: 0em;
  right: 0em;
  border: none;
  border-radius: 50%;
  padding: 0.125em;
  line-height: 1;
  cursor: pointer;
}
.input {
  padding: 0.5em;
  border: none;
  border-bottom: 1px solid @gray-900;
  background-color: inherit;
}
.input:focus {
  outline: none;
  border-bottom-color: @gray-700;
}
.username-label {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.submit-btn {
  background-color: @gray-300;
  display: block;
  padding: 0.5em 1em;
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
  &:hover {
    background-color: @gray-200;
  }
}
.error-message {
  color: @red-500;
  display: none;
  &.show-error-message {
    display: block;
  }
}
.register-step {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
</style>